<div id="import-template-dom">
   
    <p></p>
    <div v-show="isOver">
        <span>导入完成</span><br />
        <a href="" @click.prevent="toList">模板列表</a>
        <a href="" @click.prevent="importAgin">重新导入</a>
        <div class="panel panel-default">
            <div class="panel-body" v-html="msg"></div>
        </div>
        <ul>
            <li v-for="t in templates">
                模板：{{t.templateName}}
                <ol>
                    <li v-for="item in t.templateItems">
                        项目名称：{{item.itemName}} 项目占比:{{item.itemProportion}} 最高分值：{{item.itemMaxScore}}
                    </li>
                </ol>
            </li>
        </ul>
    </div>

    <div v-show="!isOver">
        <p><a href="http://localhost:8080/template/downLoadTemplate">下载模版</a></p>
        <p>
        <form action="">
            <p>选择模板：<input @change="chooseFile($event)" name="import-template" type="file"></p>
            <p><input type="button" @click='subImport' value="提交"></p>
        </form>
        </p>
    </div>

</div>
<script>
let importTemplate = Vue.createApp({
        data() {
            return {
                isOver: false,
                file: {},
                msg: '',
                templates: []
            }
        }, methods: {
            importAgin() {
                this.isOver = false
                this.file = {}
                this.msg = ''
                this.templates = []
            },
            chooseFile(event) {
                // 选择文件
                this.file = event.target.files[0]
            },
            toList() {
                showOrCheckTab("模版列表", "template-list.html");
            },
            subImport() {
                // 文件提交
                let data = new FormData();
                data.append("template",this.file);
                //开始提交
                axios.post('http://localhost:8080/template/import',data)
                .then((res)=>{
                    //  导入失败
                    this.isOver = true;
                    // 将返回的保存成功的templates设置到this的templates中。
                    this.templates = res.data.data;

                    this.msg = res.data.msg;
                });
            }
        }
    });
    importTemplate.mount("#import-template-dom")
</script>

